<template>
  <view class="container">
	  <view class="central-content">
    <!-- 中央的圆和对勾 -->
    <view class="success-circle">
      <view class="check-mark">✔</view>
    </view>
    
    <view class="success-text">预约成功</view>
    
    <button type="default" class="return-button" @click="navigateBack">返回</button>
  </view>
  </view>
</template>

<script>
export default {
  methods: {
    // 返回按钮的点击事件处理函数
    navigateBack() {
      // 使用UniApp提供的导航方法返回上一页或指定页面
      uni.redirectTo({
        url: '/pages/user/consult/consult'
      });
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: flex-start; /* 垂直方向上从起点开始排列，便于调整偏上位置 */
  height: 100vh; /* 满屏高度 */
  padding-top: 20px; /*使内容偏上 */
}

/* 中央内容区域，包含圆、文本和按钮 */
.central-content {
  text-align: center; /* 文本居中 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 子元素（圆、文本、按钮）水平居中 */
}

/* 成功的圆样式 */
.success-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #81B337;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 对勾样式 */
.check-mark {
  color: white;
  font-size: 60px;
  font-weight: bold;
}

/* 发布成功文本样式 */
.success-text {
  margin-top: 20px; /* 调整文本与圆之间的间距 */
  font-size: 30px;
  color: #81b337;
}

/* 返回按钮样式 */
.return-button {
  width: 80vw;
  padding: 10px 20px;
  margin-top: 20px; /* 调整按钮与文本之间的间距 */
  background-color: #81B337;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 16px;
}
</style>

